import { RepoLink } from '@brillout/docpress'
import { ImportMeta } from '@brillout/docpress'

> **What is the Base URL?** The Base URL (aka Public Path) configures the URL root of your website.
> For example, instead of serving your website at `https://example.org/*` (the Base URL is `/`), you can serve your website at `https://example.org/some-base/*` by setting the Base URL to `/some-base/`.

## `base`

To change the Base URL:

1. Set [`vite.config.js#base`](https://vitejs.dev/config/shared-options.html#base).
   ```js
   // vite.config.js
   export default {
     base: '/some-base/'
   }
   ```
1. Use [<ImportMeta prop='env.BASE_URL' />](https://vitejs.dev/guide/build.html#public-base-path) to implement a `<Link>` component that prepends the Base URL. Example: <RepoLink path='/examples/base-url/components/Link.jsx' />.
1. Use <ImportMeta prop='env.BASE_URL' /> for referencing static assets living in [`public/`](/static-directory#public). Example: <RepoLink path='/examples/base-url/renderer/+onRenderHtml.jsx' />.

```html
<!-- view-source:https://my-website.com/some-base/ -->

<!-- Note how the website is served at https://my-website.com/some-base/ and
     how the asset URLs are prepended with the Base URL /some-base/ -->

<html>
  <head>
    <link href="/some-base/logo.svg" rel="icon">
    <link href="/some-base/style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <nav>
      <a href="/some-base/">Landing Page</a>
      <a href="/some-base/about">About Page</a>
    </nav>
    <script src="/some-base/script.js" type="module"></script>
  </body>
</html>
```

Example:
 - <RepoLink path='/examples/base-url/' />


## `baseAssets`

You can change the Base URL only for your assets by using the `baseAssets` setting. The Base URL of the URL of your pages is left unchanged.

> The most common use case for using `baseAssets` is when deploying assets to a CDN.

```js
// vite.config.js

import vike from 'vike/plugin'

export default {
  plugins: [
    vike({
      baseAssets: 'https://cdn.example.org/my-website-assets/'
    })
  ]
}
```

Note how the Base URL of the URL of your pages isn't changed: your website is still served at `https://my-website.com/*` (the Base URL is still `/`).

```html
<!-- view-source:https://my-website.com/ -->

<html>
  <head>
    <!-- Note how the Base URL is 'https://cdn.example.org/my-website-assets/' -->
    <link
      href="https://cdn.example.org/my-website-assets/logo.svg"
      rel="icon"
    >
    <link
      href="https://cdn.example.org/my-website-assets/style.css"
      rel="stylesheet"
      type="text/css"
    >
  </head>
  <body>
    <nav>
      <!-- Note how the Base URL is '/' -->
      <a href="/">Landing Page</a>
      <a href="/about">About Page</a>
    </nav>
    <!-- Note how the Base URL is 'https://cdn.example.org/my-website-assets/' -->
    <script src="https://cdn.example.org/my-website-assets/script.js" type="module">
  </body>
</html>
```

> You can use `process.env.BASE_ASSETS` and <ImportMeta prop='env.BASE_ASSETS' /> to access the `baseAssets` value in your code.

Example:
 - <RepoLink path='/examples/base-url-cdn/' />

By default, the `baseAssets` setting applies to both development and production. You can apply it only to production by using `process.env.NODE_ENV`:

```js
// vite.config.js

import vike from 'vike/plugin'

const isProduction = process.env.NODE_ENV === 'production'
const baseAssets = isProduction ? 'https://cdn.example.org/my-website-assets/' : undefined

export default {
  plugins: [
    vike({ baseAssets })
  ]
}
```

> There is [work-in-progress to apply it only in production by default](https://github.com/vikejs/vike/issues/1794).

## `baseServer`

You can do both:
 - Deploy your static assets to a CDN using the `baseAssets` setting.
 - Change the Base URL of your server using the `baseServer` setting.

```js
// vite.config.js

import vike from 'vike/plugin'

export default {
  plugins: [
    vike({
      baseAssets: 'https://cdn.example.org/my-website-assets/',
      baseServer: '/some-base/'
    })
  ]
}
```

```html
<!-- view-source:https://my-website.com/ -->

<html>
  <head>
    <!-- Note how the Base URL is 'https://cdn.example.org/my-website-assets/' -->
    <link
      href="https://cdn.example.org/my-website-assets/logo.svg"
      rel="icon"
    >
    <link
      href="https://cdn.example.org/my-website-assets/style.css"
      rel="stylesheet"
      type="text/css"
    >
  </head>
  <body>
    <nav>
      <!-- Note how the Base URL is '/some-base/' -->
      <a href="/some-base/">Landing Page</a>
      <a href="/some-base/about">About Page</a>
    </nav>
    <!-- Note how the Base URL is 'https://cdn.example.org/my-website-assets/' -->
    <script src="https://cdn.example.org/my-website-assets/script.js" type="module">
  </body>
</html>
```

> You can use `process.env.BASE_SERVER` and <ImportMeta prop='env.BASE_SERVER' /> to access the `baseServer` value in your code.

Example:
 - <RepoLink path='/examples/base-url-server/' />
